<template>
    <div class="box-bg min-h-screen">
        <div class="flex justify-end <lg:justify-center lg:pr-[25%] pt-[200px]">
            <div class="bg-white w-[380px] rounded-[12px] py-[40px] px-[60px] shadow-lg shadow-gray-200">
                <div class="mb-[32px] text-[32px] text-[#333333] font-solid text-center">律优通运营管理</div>
                <a-form ref="formRef" :model="formState" name="basic" layout="horizontal" :rules="rules"
                    @finish="onSubmit">
                    <a-form-item name="username">
                        <a-input v-model:value="formState.username" size="large" placeholder="请输入账号">
                            <template #prefix>
                                <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                            </template>
                        </a-input>
                    </a-form-item>
                    <a-form-item name="password">
                        <a-input-password v-model:value="formState.password" size="large" placeholder="请输入密码">
                            <template #prefix>
                                <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                            </template>
                        </a-input-password>
                    </a-form-item>
                    <a-form-item name="code">
                        <a-row :gutter="16">
                            <a-col :span="16">
                                <a-input v-model:value="formState.code" size="large" type="text" placeholder="请输入验证码">
                                    <template #prefix>
                                        <SafetyOutlined style="color: rgba(0, 0, 0, 0.25)" />
                                    </template>
                                </a-input>
                            </a-col>
                            <a-col :span="8">
                                <img :src="verify" v-if="verify" alt="验证码" @click="captcha" class="w-[80px] h-[40px]" />
                                <a-skeleton-button size="large" v-else :active="true" />
                            </a-col>
                        </a-row>
                    </a-form-item>
                    <a-form-item>
                        <a-button class="w-full" size="large" :loading="loading" type="primary"
                            html-type="submit">登录</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import useUserStore from '@/stores/user';
import { adminLoginaptcha } from '@/utils/api/sys';
import type { Rule } from 'ant-design-vue/es/form';

interface FormState {
    username: string;
    password: string;
    key: string;
    code: string;
    user_type: string;
}

const formRef = ref();

const formState = reactive<FormState>({
    username: '',
    password: '',
    key: '',
    code: '',
    user_type: '',
});

const rules: Record<string, Rule[]> = {
    username: [
        { required: true, message: '请输入账号', trigger: 'change' },
        { min: 2, max: 50, message: '账号不正确', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'change' },
        { min: 6, max: 50, message: '密码不正确', trigger: 'blur' },
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'change' },
        { min: 4, max: 6, message: '验证码不正确', trigger: 'blur' },
    ],
};

const verify = ref('');

const loading = ref(false); // 加载效果

const route = useRoute();

const router = useRouter();

const userStore = useUserStore();

onMounted(() => {
    // 初始化获取图形验证码
    captcha();
});

// 刷新图形验证码
const captcha = () => {
    adminLoginaptcha(formState).then((res: any) => {
        verify.value = res.data.captcha;
        formState.key = res.data.key;
        formState.code = res.data.code;
    })
};

const onSubmit = () => {
    formRef.value
        .validate()
        .then(() => {
            loading.value = true;
            userStore.login({ ...formState }).then(() => {
                const { query: { redirect } } = route;
                const path = typeof redirect === 'string' ? redirect : '/';
                const url = router.resolve(path);
                location.href = url.href;
            }).catch(() => {
                loading.value = false
            })
        });
};
</script>
<style scoped>
.box-bg {
    background-image: url('@/assets/image/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
</style>